<template>
    <div class="content-box">
        <div class="address">
            <div>
                <p>您当前所在位置</p>
                <router-link to="/" class="link">售后状态记录-面料</router-link>
            </div>
        </div>

        <div class="roder-details">
			
            <div class="info">
					<a   class="fh" style="float: right;margin-top: -20px;" @click="fanhui()">返回</a>
                <h3 class="title">售后记录跟踪</h3>
				
                <h4 class="title10">{{detail.createTime}}</h4>
                <div class="text11">
                    <p>申请售后：</p>
                    <div>
                        <p>售后类型：{{this.detail.afterSalesString}}</p>
						 <p>面料编号：{{this.detail.fabricCode}}</p>
                        <p>售后原因：{{detail.reason}}</p>
                      <div class="imgs" v-if="this.detail.img!=null&&this.detail.img!='' ">
                      	<img  :src="this.detail.img" alt="" data-action="zoom">
                      </div>
                    </div>
                </div>

              <div v-for="(item,i) in datalist">
                <h4 class="title10">{{item.createTime}}</h4>
                <div class="text11" >
                    <p>售后状态：</p>
                    <div>
                        <p>{{item.statusString}}</p>
                        <p>备注信息：{{item.remark}}</p>
                    </div>
                </div>
				
				
				
				
				<div class="text11" v-if="item.kuaidiXs">
					<p>发货：</p>
					<div>
						<p>时间：{{item.fahuoTime}}</p>
						<p>运单号：{{item.courierNumber}}</p>
					</div>
				</div>
						<div class="text11" v-if="item.receivingXs">
					<p> 发货信息</p>
					<div>
						<div class="inputes">
							<input type="text" placeholder="运单号" v-model="courierNumber" >
				
							<a-select default-value="顺丰快递" style="width: 180px" v-model="courierId" >
								<a-select-option value="1" >
									顺丰快递
								</a-select-option>
								<a-select-option value="2">
									申通快递
								</a-select-option>
								<a-select-option value="3">
									中通快递
								</a-select-option>
								<a-select-option value="4" >
									其他
								</a-select-option>
							</a-select>
						</div>
						<a  class="fh" @click="fahuo(item)">发货</a>
					</div>
				</div>
                  </div>

            </div>
        </div>
    </div>
</template>

<script>
	import { jquery } from '@/mixins/jquery.js'
	import { zoomjs } from '@/mixins/zoom.js'
    // @ is an alias to /src
    import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {getAction,postAction} from "../../api/manage";
    export default {
        name: 'MyAfterSales',
        data() {
            return {
               courierId:'',
				courierNumber:'',
				ordertype:'',
				gedingbodysize:[],
                datalist:[],
                detail:{
					fabricCode:"",
                     afterSalesString:"",
                     reason:"",
                     createTime:"",
					 img:""
                },
                locale,
                url: {
                    orderAfterdetail: "/orderAfter/getorderatferdetail",
                    Aftertracklist:"/orderAfter/getAftertrack",
					Aftertracklist:"/orderAfter/getAftertrack",
					fahuo:"/orderAfter/fahuo",
					gedingcanshu:"/orderAfter/getSingleOrdercanshu"
				},
            }
        },

        created(){
              this.getorderatferdetail();
              this.getAftertrack();
        },
        methods: {
			
			fanhui(){
				  this.$router.push({path:'/my-afterorder'})
			},
		fahuo(item){
                   getAction(domain.publicUrl + this.url.fahuo, {
					'courierId':this.courierId,
					'courierNumber':this.courierNumber,
					'aftertrackId':item.id,
					'afterId':this.$route.query.id,
					// 'ordertype':this.ordertype
					'ordertype':0
                }).then(res => {
                 this.getAftertrack();
                })
			},

            //查询该条售后的详情
          getorderatferdetail(){
                getAction(domain.publicUrl + this.url.orderAfterdetail, {
                    'id':this.$route.query.id
                }).then(res => {
                 this.detail.afterSalesString=res.data.data.afterSalesString;
                   this.detail.createTime=res.data.data.createTime;
                     this.detail.reason=res.data.data.reason;
					 this.detail.img=res.data.data.img;
					 
					  this.detail.fabricCode=res.data.fabricCode;
					 
					
                })
          },

         //查询该条售后订单的跟踪记录
         getAftertrack(){
              getAction(domain.publicUrl + this.url.Aftertracklist, {
                    'id':this.$route.query.id
                }).then(res => {
                this.datalist=res.data.data;
                console.log("看一看数组的第一个"+this.datalist[0].remark);
                })
         },
        
            selectTab: function (dataStr, i) {
                this[dataStr] = i
            }
        }
    }
</script>

<style scoped lang="scss">
    .content-box {
        background-color: #fff;
    }

    .roder-details {
        width: 80%;
        margin: 0 auto;
        background: #fff;
        margin-top: 0px;
        padding: 0px 35px;

        .info {
            padding-top: 30px;
            padding-left: 26px;
            position: relative;
            min-height: 800px;

            .inputes {
                margin-bottom: 20px;
                display: flex;

                & > input {
                    margin-right: 10px;
                    width: 173px;
                    height: 34px;
                    padding: 3px 2px 3px 2px;
                    font-family: 'ArialMT', 'Arial';
                    font-weight: 400;
                    font-style: normal;
                    font-size: 13px;
                    text-decoration: none;
                    letter-spacing: normal;
                    color: #000000;
                    vertical-align: none;
                    text-align: left;
                    text-transform: none;
                    background-color: transparent;
                    border: 1px solid rgba(220, 223, 230, 1);
                    padding-left: 4px;
                }
            }

            .fh {
                width: 82px;
                height: 36px;
                background-color: rgba(81, 81, 81, 1);
                border-radius: 3px;
                display: block;
                line-height: 36px;
                text-align: center;
                color: rgb(236, 227, 0);
            }

            .imgs {
                display: flex;
                margin-bottom: 20px;

                img {
                    width: 88px;
                    height: 88px;
                    margin-right: 10px;
                }
            }


            .text11 {
                display: flex;
                margin-bottom: 20px;

                & > p {
                    width: 100px;
                    font-weight: 100;
                    font-size: 14px;
                    color: #333;

                }

                & > div {
                    & > h5 {
                        color: #333;
                        font-size: 15px;
                        font-weight: 500;

                        display: block;
                    }

                    & > p {
                        color: #333;
                        font-size: 15px;
                        font-weight: 100;

                        display: block;
                    }
                }
            }

            .title10 {
                color: #333;
                font-weight: 700;
                font-size: 16px;
                line-height: 16px;
                margin-bottom: 20px;
            }

            .text10 {
                display: flex;
                margin-bottom: 20px;

                & > p {
                    width: 100px;
                    font-weight: 100;
                    font-size: 14px;
                    color: #333;

                }

                div {
                    span {
                        color: #333;
                        font-size: 15px;
                        font-weight: 100;

                        &.b {
                            font-weight: 500;
                        }

                        display: block;
                    }
                }
            }

            .table-css {
                position: relative;

                .bz {
                    width: 447px;
                    height: 63px;
                    background: inherit;
                    background-color: rgba(255, 221, 202, 1);
                    position: absolute;
                    right: 0px;
                    top: -63px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                    flex-direction: column;

                    p {
                        width: 100%;
                        color: rgb(251, 8, 8);
                        font-size: 13px;
                        padding-left: 10px;
                        margin-bottom: 0px;
                        line-height: 16px;
                    }
                }
            }

            .btns {
                margin-top: 25px;
                margin-bottom: 60px;
                display: flex;

                .btn1 {

                    border-width: 0px;
                    width: 105px;
                    height: 42px;
                    background: inherit;
                    background-color: rgba(81, 81, 81, 1);
                    border: none;
                    border-radius: 3px;
                    -moz-box-shadow: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
                    font-weight: 500;
                    font-style: normal;
                    font-size: 13px;
                    text-align: center;
                    display: block;
                    color: rgb(236, 227, 0);
                    line-height: 40px;
                    margin-right: 20px;
                    cursor: pointer;
                }

                .btn2 {

                    border-width: 0px;
                    width: 105px;
                    height: 42px;
                    background: inherit;
                    background-color: rgba(244, 244, 244, 1);
                    border: none;
                    border-radius: 3px;
                    -moz-box-shadow: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
                    font-weight: 500;
                    font-style: normal;
                    font-size: 13px;
                    text-align: center;
                    display: block;
                    color: rgb(104, 104, 104);
                    line-height: 40px;
                    margin-right: 20px;
                    cursor: pointer;
                }
            }


            .price {
                color: rgb(38, 38, 38);
                font-size: 16px;

                span {
                    color: rgb(215, 1, 1);
                }

                margin: 35px 0px;
            }

            .text1 {
                width: 533px;
                height: 105px;
                padding: 3px 2px 3px 2px;
                font-family: 'ArialMT', 'Arial';
                font-weight: 400;
                font-style: normal;
                font-size: 13px;
                text-decoration: none;
                letter-spacing: normal;
                color: #000000;
                vertical-align: none;
                text-align: left;
                text-transform: none;
                background-color: #f9f9f9;
                border-color: transparent;
                resize: none;
                outline: none;
                padding: 10px;
            }

            .tabs {
                .tab {
                    margin-bottom: 10px;
                    display: flex;

                    h5 {
                        width: 112px;
                        padding: 2px 2px 2px 24px;
                        background-color: rgba(249, 249, 249, 1);
                        font-size: 15px;
                        color: #333;
                        display: flex;
                        height: 36px;
                        align-items: center;
                        margin: 0px !important;
                        margin-right: 6px !important;
                    }

                    .tab-content {
                        height: 36px;
                        display: flex;

                        p {
                            border: 1px solid rgb(242, 242, 242);
                            min-width: 100px;
                            height: 36px;
                            height: 36px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 0 15px;
                            color: #333;
                            font-size: 15px;
                            margin-right: 6px;

                            cursor: pointer;

                            b {
                                display: none;
                                font-weight: 700;
                            }

                            &.active {
                                color: rgb(255, 236, 112);
                                font-weight: 700;
                                background-color: rgb(74, 74, 74);
                            }

                            &:hover {
                                b {
                                    display: block;
                                }

                                span {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }

            h3.title {
                height: 30px;
                line-height: 30px;
                position: relative;
                font-size: 16px;
                color: #333;
                font-weight: 700;
                margin-bottom: 25px;

                &:after {
                    position: absolute;
                    height: 100%;
                    width: 5px;
                    position: absolute;
                    left: -25px;
                    top: 0px;
                    background-color: rgba(74, 74, 74, 1);
                    content: "";
                }
            }

            .title2 {
                width: 112px;
                padding: 2px 2px 2px 24px;
                font-size: 15px;
                color: #333;
                display: flex;
                height: 36px;
                align-items: center;
                margin: 0px !important;
                margin-bottom: 10px !important;
            }

            .list {
                margin-bottom: 20px;

                .list-div {
                    display: flex;
                    flex-wrap: wrap;

                    div {
                        width: 33.3%;
                        display: flex;
                        height: 36px;
                        align-items: center;

                        p {
                            width: 112px;
                            padding: 2px 2px 2px 24px;
                            background-color: rgba(249, 249, 249, 1);
                            font-size: 15px;
                            color: #333;
                            display: flex;
                            height: 36px;
                            align-items: center;
                            margin: 0px !important;
                        }

                        span {
                            width: calc(100% - 112px);
                            padding: 2px 2px 2px 24px;
                            font-size: 15px;
                            color: #333;
                            display: flex;
                            height: 36px;
                            align-items: center;

                            &.b {
                                font-weight: 700;
                            }
                        }
                    }
                }
            }
        }
    }
	@import  '~@/mixins/zoom.css';
</style>
